<template>
  <div class="node-container" :style="{ height: '80px' }">
    <NodeContainer
      :title="data.typeName"
      :icon="data.icon"
      :has-more-options="false"
      v-bind="$attrs"
    >
    </NodeContainer>

    <Handle id="target-a" type="target" :position="Position.Left" />
    <Handle id="source-a" type="source" :position="Position.Right" />
    <Handle
      id="source-loop-a"
      class="triangle-down"
      type="source"
      :position="Position.Bottom"
      :style="{ left: '25%' }"
    >
      <div class="handle-content">LoopIn</div>
    </Handle>
    <Handle
      id="target-loop-b"
      class="triangle-up"
      type="target"
      :position="Position.Bottom"
      :style="{ left: '75%' }"
    >
      <div class="handle-content">LoopOut</div>
    </Handle>
  </div>
</template>

<script setup lang="ts" name="LoopNode">
import { computed } from "vue";
import { Handle, Position, useVueFlow } from "@vue-flow/core";
import NodeContainer from "../node_container.vue";

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
    required: true,
  },
  selected: {
    type: Boolean,
    default: false,
  },
  dragging: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
@import "@/assets/handle.css";

.node-content {
  padding: 10px;
  flex-grow: 1;
  height: 100px;
  background-color: #f5f7fa;
}

/* 向上三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border: none;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #333;
  background-color:  transparent !important;
}

/* 向下三角形 */
.triangle-down {
  width: 0;
  height: 0;
  border: none;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid brown;
  background-color: transparent !important;
}

.handle-content {
  position: absolute;
  white-space: nowrap;
  /* 防止换行 */
  font-size: 12px;
  /* 文本大小 */
  font-weight: bold;
  color: #555;
  /* 文本颜色 */
  pointer-events: none;
  /* 禁用事件 */

  /* 统一左侧定位规则 */
  left: 50%;
  /* 位于handle左侧5px处 */
  bottom: calc(100% + 5px);
  /* 垂直居中 */
  transform: translateX(-50%);
  /* 精确居中 */
}

/* 上三角形（Out） */
.triangle-up .handle-content {
  transform: translateX(-50%) translateY(40%); /* 对称调整 */
}


</style>